import React, { useState, useEffect } from 'react'
import { getSand } from '@/api/index'
import { Space, Table, Button, Switch, Tabs } from 'antd';
import style from './sand.less'
import { useAddKey } from '../../hooks'
import Draggable from 'react-draggable'
import Html2canvas from "html2canvas"

interface DataType {
    key: string;
    name: string;
    age: number;
    address: string;
    tags: string[];
}

const items = [
    {
        key: 0,
        label: `沙盘1`,
        src: "https://img1.baidu.com/it/u=2229809465,2749806396&fm=253&fmt=auto&app=138&f=JPEG?w=231&h=500"
    },
    {
        key: 1,
        label: `沙盘2`,
        src: "https://img2.baidu.com/it/u=2628076620,3885951757&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1082"
    },
    {
        key: 2,
        label: `沙盘3`,
        src: "https://img0.baidu.com/it/u=353953234,761144197&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889"
    },
];

export default function sand() {
    const [list, setList] = useState([])
    const [count, setCount] = useState(0)
    const [imgSrc, setSrc] = useState("")

    const columns = [
        {
            title: '楼栋名称',
            dataIndex: 'title',
            key: 'title',
            render: (text: any) => <a>{text}</a>,
            width: 200
        },
        {
            title: '楼层数',
            dataIndex: 'total_floor',
            key: 'total_floor',
            width: 80
        },
        {
            title: '销售状态',
            dataIndex: 'pay_type',
            key: 'pay_type',
            width: 90,
            render: (text: number) => {
                return <div>
                    {text ? '在售' : '停售'}
                </div>
            }
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            width: 80,
            render: (flag: number) => {
                return <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked={flag !== 0 ? true : false} />
            }
        },
        {
            title: '操作',
            key: 'action',
            render: (_: any, record: any, index: number) => {
                return <Space size="middle">
                    <Button onClick={() => {
                        let arr = JSON.parse(JSON.stringify(list))
                        arr[index].flag = !arr[index].flag
                        setList(arr)
                    }}>
                        {record.flag ? '移除' : '添加'}
                    </Button>
                    <Button>编辑</Button>
                    <Button>删除</Button>
                </Space>
            },
        },
    ];

    const save = () => {
        new Html2canvas(document.getElementById('box'), {
            useCORS: true,
            allowTaint: true // 这两个属性都是图片跨域相关属性
        }).then((canvas: any) => {
            setSrc(canvas.toDataURL())
        })
    }

    const onChange = (key: number) => {
        setCount(key);
    };

    useEffect(() => {
        getSand().then(res => {
            let arr = useAddKey(res.data.RECORDS, 'key')
            arr = useAddKey(res.data.RECORDS, 'flag')
            setList(arr)

        })
    }, [])
    return (
        <div className={style.flex}>
            <Table columns={columns} dataSource={list} />
            <div>
                <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
                <div id='box' className={style.box}>
                    <div className="fu">
                        {
                            list.map((item: any, index) => {
                                return item.flag ? <Draggable key={index} bounds={{ right: 430, left: 0, top: 0, bottom: 400 }}  >
                                    <span className={style.span}>
                                        123
                                    </span>
                                </Draggable> : ''
                            })
                        }

                    </div>
                    <img className={style.img} src={items[count].src} alt="" />
                </div>
                <Button onClick={save}>保存沙盘</Button>
                <img src={imgSrc} alt="" />
            </div>
        </div>
    )
}
